import React, { Component } from 'react'
import { Routes, Route, Link } from "react-router-dom";
import Detail from "./Detail";

export default class Message extends Component {
  state={
    messageArr: [
      {id: '01', title: '消息1'},
      {id: '02', title: '消息2'},
      {id: '03', title: '消息3'},
    ]
  }
  render() {
    const {messageArr} = this.state
    return (
      <>
        <ul>
          {
            messageArr.map(item => {
              return <li key={item.id}>
                {/* 想路由组件传递params参数 */}
                        {/* <Link to={`detail/${item.id}/${item.title}`} >{item.title}</Link> */}
                {/* 向路由组件传递search参数 */}
                <Link to={`detail?id=${item.id}&title=${item.title}`}>{item.title}</Link>
                    </li>
            })
          }
        </ul>
        <hr/>
        <Routes>
          {/* 声明接收params参数 */}
          {/* <Route path="detail/:id/:title" element={<Detail/>} ></Route> */}

          {/*serach参数无需声明接收,正常注册路由即可 */}
          <Route path="detail" element={<Detail/>} ></Route>
        </Routes>
      </>
    )
  }
}
